<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 使用UTF-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 设置移动终端可视区域 -->
  <meta content="telephone=no" name="format-detection">
  <!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
  <title>966588服务</title>
  <link href="css/style.css" type="text/css" rel="stylesheet" />
  <link href="css/weui.css" type="text/css" rel="stylesheet" />
</head>

<body style="background: #f6f6f6;">
  <div class="index" id="containerVue" v-cloak>
    <div v-show="showBanner==1" class="headerView">
      <i onclick="closeView()">&#139;</i>
      <h1>"966588"查询系统</h1>
      <div></div>
      <div class="right" @click="choiceView">筛选</div>
    </div>
    <div v-show="showBanner==0" style="background: #fff;" class="headerView">
      <i style="color:#0787d5" onclick="closeView()">&#139;<span style="color:#0787d5;font-size: 1rem;position: relative;bottom: 0.1rem;">返回</span></i>
      <div style="color:#0787d5" class="right" @click="choiceView">筛选</div>
    </div>
    <div class="choice_tip" v-if="choice">
      <div class="choice_view">
        <!-- <div class="choice">
          <div class="name">超期节点类型</div>
          <div class="text" @click="adjustOpen"><input type="text" readonly v-model="adjustType"
              style="font-size: .9rem;" /></div>
          <div class="selectView" v-if="proType">
            <div class="ulView">
              <div class="title">超期节点类型</div>
              <div class="ul" style="height: 8.25rem;">
                <div class="li" v-for="item in adjust" :class="[item.value == endParam.type?'active':'']"
                  @click="causeSelect(item)">
                  <div>{{item.title}}</div>
                  <img src="./image/select.png" alt="">
                  <img src="./image/selected.png" class="check" alt="">
                </div>
              </div>
              <div class="selectbtn">
                <div @click="selectCause" style="color: #2e84db;">确定</div>
              </div>
            </div>
          </div>
        </div> -->
        <!-- <div class="choice">
          <div class="name">日期范围</div>
          <div class="text">
            <input type="text" style="width: 44%;" id="startTime" readonly />
            <span style="float: left;vertical-align: middle;margin: .2rem .5rem;">~</span>
            <input type="text" style="width: 45%;" id="endTime" v-model="param.endDate" readonly />
          </div>
        </div> -->
        <div class="choice">
          <div class="name">按月统计截止月份</div>
          <div class="text">
            <input type="text" style="width: 100%;" id="monthTime" readonly />
          </div>
        </div>
        <div class="choice_btn">
          <div class="btn_view" @click="choice = false">关闭</div>
          <div class="btn_view choice_btn_active" @click="search()">确定</div>
        </div>
      </div>
    </div>
    <div class="censusList">
      <!-- <select name="department" id="" class="select" v-model="param.deptCode" placeholder="">
        <option value="">全部部门</option>
        <option :value="item.code" v-for="item in departmentList">{{item.name}}</option>
      </select> -->

      <div class="search-box">
        <div class="selAll" style="width: 54%;">
          <div @click="departmentClick">{{departmentText}}</div>
          <div class="selectView" v-if="department">
            <div class="ulView">
              <div class="title">部门</div>
              <div class="ul" style="height: 8.25rem;">
                <div class="li" v-for="item in departmentList" :class="{'active': item.checked}"
                  @click="departmentSelect(item)">
                  <div>{{item.name}}</div>
                  <img src="./image/select.png" alt="">
                  <img src="./image/selected.png" class="check" alt="">
                </div>
              </div>
              <div class="selectbtn">
                <div @click="resetDepartment" style="border-right: 1px solid #ddd">重置</div>
                <div @click="selectDepartment" style="color: #2e84db;">确定</div>
              </div>
            </div>
          </div>
        </div>
        <div class="departmentStatus" style="width: 20%;">
          <select name="natureCode" id="" class="select" v-model="endParam.nature" placeholder="">
            <option value="">全部</option>
            <option value="现状">现状</option>
            <option value="放线">放线</option>
            <option value="竣工">竣工</option>
          </select>
        </div>
        <div class="departmentStatus" style="width: 20%;">
          <select name="departmentCode" id="" class="select" v-model="endParam.overDateType" placeholder="">
            <option value="0">全部</option>
            <option value="1">进行中</option>
            <option value="2">已完成</option>
          </select>
        </div>
      </div>
      <div class="box">
        <div class="list" :class="item.isChecked?'':'listActive'" v-for="(item,index) in statisticsMonthList">
          <div class="title" @click="changeList(item,index)">
            <div>{{item.name}}<span style="font-size: .6rem;color: #999;">({{depText}})</span></div>
            <img src="./image/back.png" alt="" class="arrow">
          </div>
          <div v-if="index == 0">
            <div class="content" style="margin-bottom: 0;" v-show="proMonth">
              <div :id="'month'+index" style="width: 14.5rem;height: 15rem;"></div>
              <div class="text">注:按月定期统计</div>
            </div>
            <div class="content" style="margin-bottom: 0;" v-show="!proMonth">
              <div id="monthChart" style="width: 14.5rem;height: 15rem;"></div>
              <div class="text">注:按月定期统计 <div class="btn" @click="backMonth">返回</div></div>
            </div>
          </div>
          <div v-if="index == 1">
            <div class="content" style="margin-bottom: 0;">
              <div :id="'month'+index" style="width: 14.5rem;height: 15rem;"></div>
              <div class="text">注:按月定期统计</div>
            </div>
          </div>
          <div v-if="index == 2">
            <div class="content" style="margin-bottom: 0;">
              <div :id="'month'+index" style="width: 14.5rem;height: 15rem;"></div>
              <div class="text">注:按月定期统计</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- loading 加载 -->
    <div style="opacity: 1;" v-if="loading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <img src="image/load.gif" alt="" style="width: 2rem;margin: 2rem auto .5rem;">
        <p class="weui-toast__content">加载中</p>
      </div>
    </div>
  </div>
  <script src="script/jquery-3.5.js"></script>
  <script src="script/vue.js"></script>
  <script src="script/api.js"></script>
  <script src="script/ajax.js"></script>
  <script src="script/echarts.min.js"></script>
  <script src="script/laydate/laydate.js"></script>
  <script>
    var app = new Vue({
      el: '#containerVue',
      data: {
        param: {
          startDate: "",
          endDate: "",
          type: "-1",
          nature: "",
          deptCode: "",
          overDateType: '0'
        }, // 搜索条件
        endParam: {
          endDate: new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)) + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()),
          deptCode: "",
          type: "-1",
          nature: "",
          overDateType: '0'
        },
        choice: false, // 筛选条件
        proType: false,
        adjust: [{
          title: '全部超期',
          value: -1
        }, {
          title: '项目超期个数',
          value: 0
        }, {
          title: '项目个数超期率',
          value: 1
        }, {
          title: '项目时间超期率',
          value: 2
        }],
        adjustType: '',
        loading: false,
        statisticsInfo: {},
        statisticsMonthInfo: {},
        statisticsList: [],
        statisticsMonthList: [],
        departmentList: [],

        department: false,
        departmentText: "选择部门",
        depText: "全院",
        proMonth: true,
        showBanner:0,
      },
      created() {

      },
      mounted() {
        this.getDepartment();
        if (this.GetQueryString("overdu") == null) {
          this.endParam.deptCode = "";
          this.getByMonth();
          this.getProMonth();
        } else {
          this.endParam.deptCode = this.GetQueryString("overdu");
          this.getByMonth();
          this.getProMonth();
        }
      },
      watch: {
        'endParam.nature': function (val, oldval) {
          this.getByMonth();
          this.getProMonth();
        },
        'endParam.overDateType': function (val, oldval) {
          this.getByMonth();
          this.getProMonth();
        },
      },
      methods: {
        backView() {
          window.history.go(-1);
        },
        GetQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        },
        backMonth() {
          this.proMonth = true;
          this.endParam.endDate = new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)) + '-' + (new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate())
        },
        departmentClick() {
          this.department = true;
        },
        departmentSelect(item) {
          item.checked = !item.checked
        },
        resetDepartment() {
          this.department = false;
          this.endParam.deptCode = '';
          this.departmentText = '选择部门';
          this.depText = '全院';
          this.departmentList.forEach((item, index) => {
            item.checked = false;
          })
          this.getByMonth();
          this.getProMonth();
        },
        selectDepartment() {
          this.department = false;
          let paramDeptCode = [], depTextArr = new Array();
          this.departmentList.forEach((item, index) => {
            if (item.checked == true) {
              paramDeptCode.push(item.code)
              depTextArr.push(item.name)
            }
          })
          console.log(depTextArr);
          if (paramDeptCode.length > 0) {
            this.departmentText = `已选择${paramDeptCode.length}个部门`
            this.depText = depTextArr.join(',')
          } else {
            this.departmentText = '选择部门'
            this.depText = '全院'
          }
          let str = paramDeptCode.join(',')
          this.endParam.deptCode = str;
          console.log(this.endParam.deptCode)
          this.getByMonth();
          this.getProMonth();
        },
        selectCause() {
          this.proType = false;
        },
        causeSelect(e) {
          this.endParam.type = e.value;
          this.adjustType = e.title;
        },
        adjustOpen() {
          this.proType = true;
        },
        // 筛选功能
        search() {
          document.body.scrollTop = 0;
          this.choice = false;
          this.getByMonth();
          this.getProMonth()
        },
        // 日期筛选
        choiceView() {
          this.choice = true;
          setTimeout(function () {
            laydate.render({
              elem: "#startTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.startDate = value;
              }
            });
            laydate.render({
              elem: "#endTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.endDate = value;
              }
            });
            laydate.render({
              elem: "#monthTime",
              type: 'month',
              trigger: 'click',
              showBottom: true,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                console.log(value);
                app.endParam.endDate = value + "-31";
              }
            })
          }, 5 * 100);
        },
        changeList(item, i) {
          this.statisticsMonthList.forEach((element, index) => {
            if (index == i) {
              element.isChecked = !element.isChecked
            }
          });
        },
        getEchart(namesList,datasList) {
          var myChart = echarts.init(document.getElementById('monthChart')), names = namesList, datas = datasList;
          // 指定图表的配置项和数据
          var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
              show: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                var str = `<div>${params[0].axisValueLabel}<br/>${params[0].value}个</div>`
                return str
              }
            },
            // legend: {
            //   data: ['接入率', '在线率', '完好率'],
            //   align: 'right',
            //   right: 10,
            //   textStyle: {
            //     color: "#fff"
            //   },
            //   itemWidth: 10,
            //   itemHeight: 10,
            //   itemGap: 35
            // },
            grid: {
              top: "5%",
              left: '25%',
              right: '20%',
              bottom: '5%',
              // containLabel: true
            },
            xAxis: [{
              type: 'value',
              axisLabel: {
                formatter: ''
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                }
              }
            }],
            yAxis: [{
              type: 'category',
              data: names,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#999",
                },
                interval: 0,
                formatter: function (value) {
                  let valLength = value.indexOf("（")
                  let val = value
                  return val
                },
              },
            }],

            series: [{
              name: '',
              type: 'bar',
              data: datas,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#333',
                  formatter: function (params) {
                    return params.value + '个';
                  }
                }
              },
              barWidth: "15", //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#008cff'
                  }, {
                    offset: 1,
                    color: '#005193'
                  }]),
                  opacity: 1,
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        getLineEchart(i) {
          var myChart = echarts.init(document.getElementById('month' + i)), names = this.statisticsMonthList[i].deptNameList, datas = this.statisticsMonthList[i].dataList, seriesData = [];
          let colorMonth = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69",
            "#FFd115",
            "#Fe995A",
            "#a9cCFF",
            "#ef9Aa9"
          ];
          let xAxisData = [];
          this.statisticsMonthInfo.monthList.forEach(item=>{
            xAxisData.push(item)
          })
          xAxisData.sort();
          let hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
              )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
          }
          names.forEach((item,nameIndex)=> {
            let yAxisData = new Array();
            yAxisData = datas.map(v => v['value' + nameIndex])
            seriesData.push({
              name: names[nameIndex],
              type: "line",
              smooth: true,
              // showSymbol: false,/
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: colorMonth[nameIndex],
                  shadowBlur: 3,
                  shadowColor: hexToRgba(colorMonth[nameIndex], 0.5),
                  shadowOffsetY: 8
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                      offset: 0,
                      color: hexToRgba(colorMonth[nameIndex], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(colorMonth[nameIndex], 0.1)
                    }
                    ],
                    false
                  ),
                  shadowColor: hexToRgba(colorMonth[nameIndex], 0.1),
                  shadowBlur: 10
                }
              },
              data: yAxisData
            })
          })
          var option = {
            backgroundColor: "rgba(0,0,0,0)",
            color: colorMonth,
            legend: {
              show: true,
              icon: "circle",
              itemHeight: 6,
              textStyle: {
                fontSize: 10
              }
            },
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                let html = '';
                params.forEach(v => {
                  // console.log(v)
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${colorMonth[v.componentIndex]};"></span>
                  ${v.seriesName}
                  <span style="color:${colorMonth[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>`;
                })
                return html
              },
              extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
              axisPointer: {
                type: 'shadow',
                shadowStyle: {
                  color: '#ffffff',
                  shadowColor: 'rgba(225,225,225,1)',
                  shadowBlur: 5
                }
              }
            },
            grid: {
              top: "30%",
              left: '5%',
              right: '8%',
              bottom: '5%',
              containLabel: true
            },
            xAxis: [{
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: "#666",
                  fontSize: 12,
                },
                align: "center",
                padding: [10,0,0,0],
                rotate: "30",
              },
              axisLine: {
                lineStyle: {
                  color: "#D9D9D9"
                }
              },
              triggerEvent: true,
              data: xAxisData
            }],
            yAxis: [{
              type: "value",
              name: '个',
              axisLabel: {
                textStyle: {
                  color: "#666"
                }
              },
              nameTextStyle: {
                color: "#666",
                fontSize: 12,
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                  color: "#E9E9E9"
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            }],
            series: seriesData
          }
          myChart.clear();
          myChart.setOption(option);
          var that = this;
          myChart.on('click', function (params) {
            if(params.componentType == "xAxis"){
              that.endParam.endDate = params.value;
              that.proMonth = false;
              that.getProMonth();
            }else{
                // alert("单击了"+params.name+"柱状图");
            }
          });
        },
        getProMonth() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/getOverdateDeptCountByMonth',
            type: 'post',
            data: that.endParam,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              // console.log(res);
              if (res.success) {
                setTimeout(() => {
                  that.getEchart(res.result.deptList,res.result.overDateNumList);
                }, 800);
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        getMonthEchart(i, nameType) {
          let _this=this;
          var myChart = echarts.init(document.getElementById('month' + i)), names = this.statisticsMonthInfo.monthList, datas = this.statisticsMonthList[i].dataList;
          // 指定图表的配置项和数据
          var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
              show: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                let name = nameType.indexOf('率'), str = "";
                if (name !== -1) {
                  str = `<div>${params[0].axisValueLabel}<br/>${(params[0].value * 100).toFixed(2)}%</div>`
                } else {
                  str = `<div>${params[0].axisValueLabel}<br/>${params[0].value}个</div>`
                }
                return str
              }
            },
            grid: {
              top: "5%",
              left: '25%',
              right: '20%',
              bottom: '5%',
            },
            xAxis: [{
              type: 'value',
              axisLabel: {
                formatter: ''
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                }
              },
            }],
            yAxis: [{
              type: 'category',
              data: names,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#999",
                }
              },
            }],
            series: [{
              name: '',
              type: 'bar',
              data: datas,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#333',
                  formatter: function (params) {
                    let name = nameType.indexOf('率')
                    if (name !== -1) {
                      return (params.value * 100).toFixed(2) + '%';
                    } else {
                      return params.value + '个';
                    }
                  }
                }
              },
              barWidth: "15", //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#008cff'
                  }, {
                    offset: 1,
                    color: '#005193'
                  }]),
                  opacity: 1,
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          //下转点击事件
          myChart.on('click', function(params) {
            let month = params.name,plan=0,real=0;
            for(let i=0;i<_this.statisticsMonthInfo.monthList.length;i++){
              if(month==_this.statisticsMonthInfo.monthList[i]){
                plan=_this.statisticsMonthList[2].avaPlanDayList[i];
                real=_this.statisticsMonthList[2].avaRealDayList[i];
              }
            }
            window.location.href = './censusOverdueChartList.html?deptCodeArr=' + _this.endParam.deptCode +'&currentMonth='+month+ '&nature=' + encodeURI(encodeURI(_this.endParam.nature)) + '&overDateType=' + _this.endParam.overDateType+ '&type=' + _this.endParam.type+'&plan='+plan.toFixed(2)+'&real='+real.toFixed(2);
          })
        },
        getMonthRateEchart(i, nameType){
          let _this=this;
          var myChart = echarts.init(document.getElementById('month' + i)), names = this.statisticsMonthInfo.monthAndRateList, datas = [];
          datas = [
            {
              name: '实际工期',
              type: 'bar',
              data: this.statisticsMonthList[i].avaRealDayList,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#333',
                  formatter: function (params) {
                    return params.value.toFixed(2) + '天';
                  }
                }
              },
              barWidth: "12",
              // barGap: 1,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3EE556'
                  }, {
                    offset: 1,
                    color: '#3EAC4E'
                  }]),
                  opacity: 1,
                }
              }
            },
            {
              name: '预计工期',
              type: 'bar',
              data: this.statisticsMonthList[i].avaPlanDayList,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#333',
                  formatter: function (params) {
                    return (params.value).toFixed(2) + '天';
                  }
                }
              },
              barWidth: "12", //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#008cff'
                  }, {
                    offset: 1,
                    color: '#005193'
                  }]),
                  opacity: 1,
                }
              }
            }
          ]
          var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
              show: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                let name = nameType.indexOf('率'), str = "";
                if (name !== -1) {
                  if (i == 1) {
                    str = `<div>${params[0].axisValueLabel}<br/>${(params[0].value * 100).toFixed(2)}%</div>`
                  } else if (i == 2) {
                    str = `<div>${params[0].seriesName}<br/>${(params[0].value).toFixed(2)}天</div>
                    <div>${params[1].seriesName}<br/>${(params[1].value).toFixed(2)}天</div>`
                  }
                } else {
                  str = `<div>${params[0].axisValueLabel}<br/>${params[0].value}个</div>`
                }
                return str
              }
            },
            grid: {
              top: "5%",
              left: '25%',
              right: '20%',
              bottom: '5%',
              // containLabel: true
            },
            xAxis: [{
              type: 'value',
              axisLabel: {
                formatter: ''
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#999",
                }
              }
            }],
            yAxis: [{
              type: 'category',
              data: names,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#999",
                  width: 1,
                  type: "solid"
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#999",
                },
                interval: 0,
                formatter: function (value) {
                  let val = ''
                  let valLength = value.indexOf("（")
                  val = value.substr(0, valLength) + '\n{a|' + value.substr(valLength, value.length) + '}'
                  return val
                },
                rich: {
                  a: {
                    color: '#fe6762',
                  },
                }
              },
            }],
            series: datas
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          //下转点击事件
          myChart.on('click', function(params) {
            let valLength = params.name.indexOf("（")
            let month = params.name.substr(0, valLength),plan=0,real=0;
            for(let i=0;i<_this.statisticsMonthInfo.monthList.length;i++){
              if(month==_this.statisticsMonthInfo.monthList[i]){
                plan=_this.statisticsMonthList[2].avaPlanDayList[i];
                real=_this.statisticsMonthList[2].avaRealDayList[i];
              }
            }
            window.location.href = './censusOverdueChartList.html?deptCodeArr=' + _this.endParam.deptCode +'&currentMonth='+month+ '&nature=' + encodeURI(encodeURI(_this.endParam.nature)) + '&overDateType=' + _this.endParam.overDateType+ '&type=' + _this.endParam.type+'&plan='+plan.toFixed(2)+'&real='+real.toFixed(2);
          })
        },
        // 获取部门列表
        getDepartment() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/sys/sysDepart/queryGhhsDeptList',
            type: 'post',
            data: {},
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              if (res.success) {
                res.result.forEach(item => {
                  item.checked = false;
                })
                that.departmentList = res.result
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        // 获取统计信息
        getStatistics() {
          this.showBanner=localStorage.getItem("showBanner");
          debugger
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/getOverdateCountChart',
            type: 'post',
            data: this.param,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              // console.log(res);
              if (res.success) {
                that.statisticsInfo = res.result;
                that.statisticsList = res.result.tabList;
                that.statisticsList.forEach((item, index) => {
                  setTimeout(() => {
                    that.getEchart(index, item.name);
                  }, 800);
                })

              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        // 获取统计信息
        getByMonth() {
          this.showBanner=localStorage.getItem("showBanner");
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/getOverdateCountByMonth',
            type: 'post',
            data: this.endParam,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              // console.log(res);
              if (res.success) {
                that.statisticsMonthInfo = res.result;
                that.statisticsMonthList = res.result.tabList
                that.statisticsMonthList.forEach((item, index) => {
                  if (index == 0) {
                    setTimeout(() => {
                      that.getLineEchart(index)
                    }, 800);
                  } else if (index == 1) {
                    setTimeout(() => {
                      that.getMonthEchart(index, item.name);
                    }, 800);
                  } else if (index == 2){
                    setTimeout(() => {
                      that.getMonthRateEchart(index, item.name);
                    }, 800);
                  }
                })
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
      }
    })
  </script>
</body>

</html>